<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG链表</title>
  <link rel="stylesheet" href="./SVG链表.css">
</head>

<body>
  
  <!------------------------------- 陈志伟 -------------------------->
  <svg width="1000" height="500" class="svg">
    <defs>
      <g id="head">
        <circle cx="50" cy="50" r="20" fill='none' stroke='#333333' stroke-width='4px'/>
        <polyline fill="black" stroke="#333333" stroke-width="3px" points="70,50 140,50 130,45 130,55 140,50"></polyline>
        <text x="20" y="95" class="head">head</text>
      </g>

      <g id="temp">
        <circle cx="50" cy="50" r="20" fill='none' stroke='#333333' stroke-width='4px'/>
        <polyline fill="black" stroke="#333333" stroke-width="3px" points="70,50 140,50 130,45 130,55 140,50"></polyline>
      </g>
   

      <g id="tail">
        <circle cx="50" cy="50" r="20" fill='none' stroke='#333333' stroke-width='4px'/>
        <text x="32" y="95" class="tail">tail</text>
      </g>

      <g id="head_tail">
        <circle cx="50" cy="50" r="20" fill='none' stroke='#333333' stroke-width='4px'/>
        <text x="0" y="95" class="tail">head/tail</text>
      </g>
    </defs>
  
  <g class="node">
    <use href="#head" x="0" y="0"  ></use>
    <text x="38" y="56" class="fontstyle">25</text>
  </g>

  <g class="node">
    <use href="#temp" x="110" y="0"  />
    <text x="148" y="56" class="fontstyle">12</text>
  </g>

  <g class="node">
    <use href="#temp" x="220" y="0"  />
    <text x="258" y="56" class="fontstyle">12</text>
  </g>

  <g class="node">
    <use href="#temp" x="330" y="0"  />
    <text x="368" y="56" class="fontstyle">12</text>
  </g>
  
  <g class="node">
    <use href="#temp" x="440" y="0"  />
    <text x="478" y="56" class="fontstyle">12</text>
  </g>

  <g class="node">
    <use href="#tail" x="550" y="0"  />
    <text x="588" y="56" class="fontstyle">32</text>
  </g>
  </svg>

  <div class="btn-container">
    <div class="btn1">创建节点(没来得及写)</div>
    <div class="btn2">搜索节点(没来得及写)</div>
    <div class="btn3">插入节点</div>
    <div class="btn4">移除节点</div>
    <div class="rmbox">
      <div class="rm1"> <span>移除i=0头部</span></div>
      <div class="rm2"><span>移出i=N-1尾部</span></div>
      <div class="rm3"> <span>在[1,N-2]中指定</span>
         i= <input class='input' type="text">
          <input class='submit' type="submit" value="执行">
      </div>
   </div>
  </div>
  <!-------------------陈志伟end --------------------------->
  
  <script src="./何达燊部分.js"></script>
  <script src="./陈志伟部分.js"></script>
</body>

</html>